<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.2');
</script>
<script type="text/javascript" src="matsutake.js"></script>
<script language="javascript">
<!--
	$(document).ready(function(){

		// STEP1 テンプレートのparse
		// #render_area 部分をテンプレートとして解釈
		Matsutake.parseString("test", $("#render_area").html());

		
		$("#say").click(function(){
			
			// STEP2　レンダリング
			// レンダリングして #render_area の内容を書き換える
			$("#render_area").html(
				Matsutake.render("test", {
					"said": $("#buffer").val()
				})
			);
		});
	});

//--></script>
</head><body>

	<h1 id="render_area"><span m:bind="${said}">ほげほげ</span>と言いました</h1>
	<input type="text" id="buffer" value="">
	<input type="button" id="say" value="発言">
	
</body></html>
